<template>
  <div class="container-width app-container">
    <teacherItem imgSize="150px" :teacher="teacherInfo"></teacherItem>

    <el-tabs class="tabs" v-model="activeTab" @tab-click="changeTabs">
      <el-tab-pane label="名师介绍" name="introduce">
        <div class="describe_html" v-html="detail"></div>
      </el-tab-pane>
      <el-tab-pane label="课程" name="catalogue">
        <el-row type="flex" style="flex-wrap: wrap">
          <el-col
            :span="5"
            :offset="index % 4 ? 1 : 0"
            v-for="(item, index) in courses"
            :key="`class_${index}`"
          >
            <courseItem :courseItem="item"></courseItem>
          </el-col>
        </el-row>
            <el-empty v-if="courses.length <= 0"></el-empty>
      </el-tab-pane>
    </el-tabs>


    <el-pagination
      class="pagination"
      @current-change="getTeacherCourseList"
      :page-size="pageSize"
      hide-on-single-page
      layout="prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script lang="ts" >

import teacherItem from "/@/components/teacherItem/index.vue";
import courseItem from "/@/components/courseItem/index.vue";
import { 
  teacherDetail, // 教师信息
  teacherCourse // 教师开课列表
} from "/@/api/teacherApi";
export default {
  components: {
    teacherItem,
    courseItem,
  },
  data() {
    return {
      pageSize: 20,
      total: 0,
      activeTab: "introduce",
      teacherInfo:{},
      detail: '',
      courses: [],
    };
  },
  mounted(){
    this.getTeacherDetail();
    
  },
  methods: {
    changeTabs: function (tab) {
      //console.log(tab.props.name)
      if(tab.props.name === 'catalogue') { // 
        this.getTeacherCourseList()
      }
    },
    getTeacherDetail() {
      teacherDetail({ teacherId: this.$route.query.teacherId }).then((res) => {
        const { teacherInfo,detail} = res;
        this.teacherInfo = teacherInfo;
        this.detail = detail;
      });
    },
    getTeacherCourseList(page = 1, params = { }) { // 获取开课列表

      let offset = (page - 1) * this.pageSize;
      teacherCourse({
        teacherId:this.$route.query.teacherId,
        offset: offset,
        size: this.pageSize,
        ...params,
      })
      .then((res) => {
        const { courseInfos, total } = res;
        this.courses = courseInfos;
        this.total = total;
      })
      .catch((err) => {
        console.error(err);
      });
    },
  },
};
</script>

<style lang="scss" scoped>

.tabs {
  margin-top: 60px;
}

</style>